<script setup lang="ts">
const tab = defineModel<number>('value', { default: 0 });

const periods = ref([
  { value: 0, text: '1W' },
  { value: 1, text: '1M' },
  { value: 2, text: '6M' },
  { value: 3, text: '∞' },
]);
</script>

<template>
  <div class="flex flex-col gap-1 rounded-2 bg-sys-layer-d p-1 text-center text-sys-text-body">
    <div
      v-for="item in periods" :key="item.value"
      class="h-9 flex-center cursor-pointer content-center rounded-1 text-3.5 hover:bg-sys-layer-e/50"
      :class="tab === item.value ? 'bg-sys-layer-e text-sys-text-head font-600' : ''"
      @click="tab = item.value"
    >
      <span :class="item.text === '∞' ? 'text-1.6em font-300' : ''">{{ item.text }}</span>
    </div>
  </div>
</template>
